<template>
  <div class="data-main-wrapper">
    <div class="head">
      <mainHead></mainHead>
    </div>
    <div class="middle">
      <div class="charts-box">
        <chart v-if="this.$store.state.golobalShow === 1"></chart>
      </div>
<!--      此处我选择用v-if指令区分页面。-->
      <div class="base-box">
        <infor v-if="this.$store.state.golobalShow === 2"></infor>
      </div>
      <future  v-if="this.$store.state.golobalShow === 3"></future>
    </div>
    <div class="footer-icon">
      <div class="information-icon" @click="toData">
        <i class="el-icon-mobile" :class="{active:this.$store.state.isColor}"></i>
        <span class="text-font" :class="{active:this.$store.state.isColor}">数据分析</span>
      </div>
      <div class="data-icon" @click="toInfor">
        <i class="el-icon-chat-line-round" :class="{active:this.$store.state.isColorOne}"></i>
        <span class="text-font" :class="{active:this.$store.state.isColorOne}">信息</span>
      </div>
      <div class="forward-icon" @click="toForward">
        <i class="el-icon-magic-stick" :class="{active:this.$store.state.isColorTwo}"></i>
        <span class="text-font" :class="{active:this.$store.state.isColorTwo}">预测</span>
      </div>
    </div>
  </div>
</template>

<!--数据中心首页框架-->
<script>
import mainHead from '../../components/main-head';
import chart from './charts/index';
import infor from "@/views/dataMain/baseInformation/infor";
import future from "@/views/dataMain/forward/future";


export default {
  name: "index",
  data(){
    return{

    }
  },
  methods:{
    toData(){
      this.$store.state.golobalShow = 1;
      this.$store.state.isColor = true;
      this.$store.state.isColorOne = false;
      this.$store.state.isColorTwo = false;
    },
    toInfor(){
      this.$store.state.golobalShow = 2;
      this.$store.state.isColor = false;
      this.$store.state.isColorOne = true
      this.$store.state.isColorTwo = false;
    },
    toForward(){
      this.$store.state.golobalShow = 3;
      this.$store.state.isColor = false;
      this.$store.state.isColorOne = false;
      this.$store.state.isColorTwo = true;
    }
  },
  components:{
    mainHead,
    chart,
    infor,
    future
  }
}
</script>

<style scoped lang="less">
  .data-main-wrapper{
    width: 100vw;
    height: 100vh;
  }
  .footer-icon{
    width: 100%;
    height: 8vh;
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    color: #b46c6c;
    background-image: linear-gradient(to right, #f6f6f6 10%, #c7bbbd 90%);
    box-shadow: 0px -1px 1px rgba(100,100,100,.2);
    font-size: 3vh;
    font-weight: bold;
    //z-index: 999999;
  }
  .information-icon{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .data-icon{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .forward-icon{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .text-font{
    font-size: 2vh;
  }
  .active{
    color: #092cdf;
  }
  .head{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }
  .middle{
    //margin-top: 8vh;
  }
  .charts-box{
    margin-top: 8vh;
  }
  .base-box{
    margin-top: -8vh;
  }
</style>